<%@ page language="java" import="java.util.*,com.mlqsknow.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/WEB-INF/tlds/messageTag.tld" prefix="msg"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title><msg:message key="menu.status" /></title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="description" content="状态">
	<!-- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	<!-- 底部加载js -->
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		setTimeout(refresh,1000*10);
		
		function refresh() {
			$("#form1").submit();
		}
	
		/* function fullScreen() {
			var isFullscreen = document.fullScreen || document.mozFullScreen
					|| document.webkitIsFullScreen;
			if (!isFullscreen) {//进入全屏,多重短路表达式
				(document.documentElement.requestFullscreen && document.documentElement.requestFullScreen())
						|| (document.documentElement.mozRequestFullScreen && document.documentElement.mozRequestFullScreen())
						|| (document.documentElement.webkitRequestFullscreen && document.documentElement.webkitRequestFullScreen())
						|| (document.documentElement.msRequestFullscreen && document.documentElement.msRequestFullScreen());
			} 
			else { //退出全屏,三目运算符
				document.exitFullscreen ? document.exitFullscreen()
						: document.mozCancelFullScreen ? document
								.mozCancelFullScreen()
								: document.webkitExitFullscreen ? document
										.webkitExitFullscreen() : '';
			}
		} */
		
		/* $(document).ready(function(){
			setTimeout(function(){
				top.document.documentElement.webkitRequestFullScreen();
			},2000);
		}); */
		
		/* function toggleFullScreen(e) {
			var el = e.srcElement || e.target;//target兼容Firefox
			el.innerHTML == '点我全屏' ? el.innerHTML = '退出全屏'
					: el.innerHTML = '点我全屏';
			fullScreen(el);
		} */ 
		
		//<button onclick="toggleFullScreen(event)">点我全屏</button>
		
	</script>
	
	<style type="text/css">
		.battery-li {position: relative; display: inline-block; width: 50px; height: 25px; border: 1px solid #27A6FF; background: #fff; border-radius: 3px;}
		.battery-li .li-head {position: absolute; width: 3px; height: 9px; background: #27A6FF; left: 51px; top: 7px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
		.battery-li .li-cont {position: absolute; top: 1px; left: 1px; height: 21px; background: #27A6FF; border-radius: 3px;}
		
		.battery-li-0 .li-cont { width: 0; }
		.battery-li-1 .li-cont { width: 5px; }
		.battery-li-2 .li-cont { width: 10px; }
		.battery-li-3 .li-cont { width: 15px; }
		.battery-li-4 .li-cont { width: 20px; }
		.battery-li-5 .li-cont { width: 25px; }
		.battery-li-6 .li-cont { width: 30px; }
		.battery-li-7 .li-cont { width: 35px; }
		.battery-li-8 .li-cont { width: 40px; }
		.battery-li-9 .li-cont { width: 45px; }
		.battery-li-10 .li-cont { width: 50px; }
	</style>
  </head>
  
  <body>
	<div class="section">
		<div class="page-mainbox" style="margin-bottom: 10px;">
			<form id="form1" action="${pageContext.request.contextPath}/statusListMonitor.do" method="post">
				<input type="hidden" id="mtPanId" name="mtPanId" value="${mtPanId }"/>
				<input type="hidden" id="mtLightNum" name="mtLightNum" value="${mtLightNum }"/>
			</form>
		</div>
		<div class="mui-table page-mainbox">
			<table>
				<thead>
					<tr>
						<th width="25"><msg:message key="dtu.code" /></th>
						<th width="25"><msg:message key="light.code" /></th>
						<th width="46"><msg:message key="light.status.collecttime" /></th>
						<th width="30"><msg:message key="light.status.title" /></th>
						<th width="50"><msg:message key="light.status.temperature" />（℃）</th>
						<th width="50"><msg:message key="light.status.solarpanelvol" />（V）</th>
						<th width="50"><msg:message key="light.status.batteryquantity" />（%）</th>
						<th width="50"><msg:message key="light.status.chargecurrent" />（mA）</th>
						<th width="50"><msg:message key="light.status.workcurrent" />（mA）</th>
						<th width="50"><msg:message key="light.status.workvol" />（V）</th>
						<th width="50"><msg:message key="light.status.chargecount" />（Ah）</th>
						<th width="50"><msg:message key="light.status.workcount" />（Ah）</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="status" items="${statusBeanList }">
					<tr>
						<td><div class="td-cont td-center">${status.panId }</div></td>
						<td><div class="td-cont td-center">${status.lightNum }</div></td>
						<td><div class="td-cont td-center">${status.collectTime }</div></td>
						<td><div class="td-cont td-center">
						<c:if test="${status.statusCode eq '10'}"><msg:message key="light.status.type.idle" /></c:if>
						<c:if test="${status.statusCode eq '20'}"><msg:message key="light.status.type.charge" /></c:if>
						<c:if test="${status.statusCode eq '30'}"><msg:message key="light.status.type.workdown" /></c:if>
						<c:if test="${status.statusCode eq '31'}"><msg:message key="light.status.type.workon" /></c:if>
						<c:if test="${status.statusCode eq '40'}"><msg:message key="light.status.type.workover" /></c:if>
						<c:if test="${status.statusCode eq 'A1'}"><msg:message key="light.status.type.undervol" /></c:if>
						<c:if test="${status.statusCode eq 'A2'}"><msg:message key="light.status.type.opencircuit" /></c:if>
						<c:if test="${status.statusCode eq 'A3'}"><msg:message key="light.status.type.overload" /></c:if>
						<c:if test="${status.statusCode eq 'A4'}"><msg:message key="light.status.type.configerror" /></c:if>
						<c:if test="${status.statusCode eq 'A5'}"><msg:message key="light.status.type.batteryerror" /></c:if>
						</div></td>
						<td><div class="td-cont td-center">${status.temperature }</div></td>
						<td><div class="td-cont td-center">${status.solarPanelVol }</div></td>
						<td><div class="td-cont td-center">
						<div class="battery-li li-full battery-li-${status.batteryVolLevel}">
							<span class="li-cont"></span>
							<i class="li-head"></i>
						</div>
						<%-- ${status.batteryVol } --%></div></td>
						<td><div class="td-cont td-center">${status.chargeCurrent }</div></td>
						<td><div class="td-cont td-center">${status.workCurrent }</div></td>
						<td><div class="td-cont td-center">${status.workVol }</div></td>
						<td><div class="td-cont td-center">${status.chargeCount }</div></td>
						<td><div class="td-cont td-center">${status.workCount }</div></td>
					</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
  </body>
</html>
